<template>
	<view :style="styleComputed"
	:class="classComputed"
	class="white-border rowCenCen "
	@click="$emit('click')">
		了解和订购
	</view>
</template>

<script setup lang="ts">
	import {useAttrs,computed} from "vue"
	// 可自定义宽高、圆角、字体大小颜色、背景色、
	const {width,height,fontSize,radius,classProp,styleProp} = defineProps({
		width:{
			type:[String,Number],
			default:500
		},
		height:{
			type:[String,Number],
			default:90
		},
		radius:{
			default:'radius-100',
			validator(value) {
			  if(typeof value === "boolean"){
				  if(value){
					  return 'radius-100'
				  }else{
					  return ''
				  }
			  }
			  return value
			}
		},
		fontSize:{
			type:[String,Number],
			default:28
		},
		// 传递的class类
		classProp:{
			type:String,
			default:''
		},
		styleProp:{
			type:String,
			default:''
		}
	})
	
	// class Object
	const classComputed = computed(()=>{
		return radius + ' '+ classProp
	})
	const styleComputed = computed(()=>{
		return 'width:'+width+'rpx;height:'+height+'rpx;font-size:'+fontSize+'rpx;'+styleProp
	})
</script>

<style>

</style>
